<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<script>
var brandSet = new Set();
function searchBrands(){	
		var brandS = $("#brandInfo").val();

        $('#dataGridBrand').datagrid({
    		url : 'productJSONAction!listBrandsDataByPage',    		
    	    queryParams: {
    	    	'formBean.brandName':brandS,    	    	
    	    },
    		fit : true,
    		fitColumns : true,
    		pagination : true,
    		pageSize : 15,
    		pageList : [ 15, 20],
    		border : false,
    		checkOnSelect : true,
    		selectOnCheck : true,
    		singleSelect: false,
    		showFooter:true,
    		rownumbers:true,
    		nowrap : false,
    		columns : [[
    					{field:'brand_ID', width:40,title:'选择',checkbox: true},	
    					
    					{field:'brand_Name', width:200,title:'品牌名称',fixed:true},	
						{field:'supplier', width:160,title:'供应商',fixed:true},
						{field:'comment', width:210,title:'备注',fixed:true},
						{field:'pinyin', width:130,title:'拼音',fixed:true},
						{field:'belong_To', width:100,title:'归属',fixed:true},						
						 {				
							field : 'action',
							title : '选择',
							width : 80,
							
						formatter : function(value, row, index) {							
							var str = '';							
							str += $.formatString('<a href="#" onclick="selectBrand(\'{0}\',\'{1}\');"><img border="0" src="{2}" title="品牌"/></a>', row.brand_ID,row.brand_Name,'<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/select.png');																					
							return str;
						}},
    			     ]],	    
    	});
        
        $("#brandDiv").dialog("open");
}
//选中品牌
function selectBrand(brandId,brandName){

	var brands = $("#brands").val();
	if(brands != null && brands != ""){
		brands += ","+brandId;
		$("#brands").val(brands);
	}else{
		$("#brands").val(brandId);
	}
	brandSet.add(brandId);
	//已选品牌数量信息
	let brandNums = brandSet.size;	
	$("#brandNums").val(brandNums);
	 $.messager.show({
         title:'选择品牌提示',
         msg:brandName +'品牌加入已选品牌',
         showType:'slide',
         timeout:100,
         style:{
        	 left:'',
             right:0,
             top:document.body.scrollTop+document.documentElement.scrollTop,
             bottom:''
         }
     });
	$("#brandDiv").dialog("close");
	
}
//查看已选品牌
function searchFilterBrands(){
	
	var brands = $("#brands").val();
    $('#brandGrid').datagrid({
		url : 'productJSONAction!listBrandsData',    		
	    queryParams: {
	    	'formBean.brandIds':brands,    	    	
	    },
		fit : true,
		fitColumns : true,
		border : false,
		checkOnSelect : false,
		selectOnCheck : false,
		singleSelect:true,
		rownumbers:true,
		nowrap : false,
		columns : [[
					{field:'brand_ID', width:40,title:'品牌ID',fixed:true,hidden: true},	
					{field:'brand_Name', width:200,title:'品牌名称',fixed:true},	
					{field:'supplier', width:180,title:'供应商',fixed:true},
					{field:'comment', width:220,title:'备注',fixed:true},
					{field:'pinyin', width:120,title:'拼音',fixed:true},
					{field:'belong_To', width:100,title:'归属',fixed:true},						
					 {				
						field : 'action',
						title : '删除',
						width : 50,
						
					formatter : function(value, row, index) {							
						var str = '';
						str += $.formatString('<a href="#" onclick="deleteBrand(\'{0}\');"><img border="0" src="{1}" title="品牌"/></a>', row.brand_ID,'<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/delete2.png');
						return str;
					}},
			     ]],

	});
	$('#selectBrandDiv').dialog('open')
}
//根据品牌ID删除已选品牌
function deleteBrand(brandId){
	brandSet.delete(brandId);
	var brandIds = "";
	brandSet.values().forEach(item => {
		brandIds += item + ","
	    });
	if(brandIds.length>1){
		brandIds = brandIds.substr(0,brandIds.length-1);
	}
	$("#brands").val(brandIds);
	let brandNums = brandSet.size;	
	$("#brandNums").val(brandNums);
	searchFilterBrands();	
}
//清空已选品牌
function deleteBrands(){
	$("#brands").val('');
	brandSet.clear();
	$("#brandNums").val(0);
	searchFilterBrands();
	$('#selectBrandDiv').dialog('close')
}

//所有checkbox 选中的品牌
function selectCheckBrands(){
	
	var rows = $('#dataGridBrand').datagrid('getChecked');
	
	if(rows.length != 0){
		for(let i = 0;i<rows.length;i++){
			var brands = $("#brands").val();
			let brandId = String(rows[i].brand_ID);
			if(brands != null && brands != ""){
				brands += ","+brandId;				
			}else{
				brands += brandId;	
			}
			$("#brands").val(brands);			

			brandSet.add(brandId);
			//已选品牌数量信息
			let brandNums = brandSet.size;				
			$("#brandNums").val(brandNums);
		}
	}
	$("#brandDiv").dialog("close");
}

</script>

<s:form id="brandForm" name="brandForm" action="" theme="simple" method="POST">

	<table  border="0"  class="InnerTableContent">
		<tr>
			<td width="50" align="left"><strong>品牌：</strong></td>
			<td width="170"><s:textfield cssClass="easyui-searchbox" id="brandInfo" data-options="prompt:'品牌名称',searcher:searchBrands"  size="18" /></td>							
			<td width="90" >
				<a onclick="searchFilterBrands();" href="javascript:void(0);" class="easyui-linkbutton c6" style="height:25px;" data-options="iconCls:'icon-filter'">已选品牌</a>
			</td>
			<td width="20" >	<input type="button" id="brandNums" style="height:25px;width:28px;color:red;text-align:center;border-radius:30%"  disabled="disabled">
			</td>
		</tr>
		</table>

</s:form>
<input type="hidden" id="brands" name="formBean.brandIds"/>
<!-- 查找品牌 -->
<div id="brandDiv" class="easyui-dialog" style="width: 1050px; height: 550px" data-options="title:'查找品牌',modal:false,closed:true,resizable:true">	
			<a onclick="selectCheckBrands();" href="javascript:void(0);" class="easyui-linkbutton c5" style="height:25px;" data-options="">确认选择</a>
		    <div id="cc" class="easyui-layout" style="width:1000px;height:450px; position: relative; top:5px;">
		    
		    	<table id="dataGridBrand" border="0" >
				</table>
		    </div>


</div>
<!-- 已选品牌 -->
<div id="selectBrandDiv" class="easyui-dialog" style="width: 1050px; height: 550px" data-options="title:'已选品牌',modal:false,closed:true,resizable:true">

<a onclick="deleteBrands();" href="javascript:void(0);" class="easyui-linkbutton c5" style="height:25px;" data-options="">一键清空</a>
	<table id="brandGrid"  border="0">
	</table>
</div>